@font-face {
    font-family: fz;
    src: url('fangzheng.TTF');
}

body {
    display: flex;
    height: 100vh;
    justify-content: center;
    align-items: center;
    background-image: linear-gradient(to top right, #BB9DFE, #F0BAFE);
}

.container {
    width: 1000px;
    height: 650px;
    background: url(bg.jpg) 0 0/1000px 650px no-repeat;
    border-radius: 10px;
}

.container .box {
    height: 100%;
    margin-left: 705px;
    padding-left: 50px;
    padding-top: 170px;
}

.container .box .title a:nth-of-type(1) {
    font-family: fz;
    color: #C3A6FE;
    font-size: 24px;
}

.container .box .title a:nth-of-type(2),
.container .box .title span {
    font-family: fz;
    color: #D3C5D2;
    font-size: 24px;
}

.container .log {
    margin-top: 50px;
}

.container .log input {
    font-family: fz;
    width: 160px;
    background: none;
    outline: none;
    border: none;
    border-bottom: 2px solid #BB9DFE;
    color: #8387D1;
    font-size: 16px;
    padding-bottom: 5px;
}

.container .log input:nth-of-type(2) {
    margin-top: 50px;
}

.container .log input::placeholder {
    color: #8387D1;
    font-size: 16px;
}

.container .forget {
    margin-top: 20px;
    font-size: 12px;
}

.container .forget a {
    color: #8387D1;
}

.container .button {
    font-family: fz;
    margin-top: 50px;
    width: 140px;
    height: 40px;
    border-radius: 20px;
    font-size: 24px;
    border: 0;
    outline: none;
    background-image: linear-gradient(to right top, #BE9FFE, #F0BAFE);
    color: #fff;
    cursor: pointer;
}